<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue2.js"></script>
    <style>
        .red{
            color:red;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="app">
        <a :href="'edit.html?id='+id">编辑</a>
        <img :src="img"  alt="">
        <p :class='{red:hasRed,line:hasLine}'>看看有没有红色样式</p>
        <button @click=[hasRed=!hasRed,hasLine=!hasLine]>切换颜色</button> 
        
        <!-- <p :class='[red,line]'>看看看有没有样式</p> -->
        <p :class='{red,line}'>看看有没有样式</p>
        <!-- <p :class='{red:hasRed,line:hasLine}'>红色样式</p> -->
        <p :style='{fontSize:fs+"px"}'>设置字体的大小</p>
    </div>
</body>
<script>
    var ms=new Vue({
        el:"#app",
        data:{
            id:5,
            img:'../images/avatar.jpg',
            red:null,
            hasRed:true,
            hasLine:true,
            line:'li',
            fs:50
        }
    })
</script>
</html>